 <style lang="less">
  @import './login.less';
</style>

<template>
  <div class="login">
    <vue-particles
        class="login-bg"
      color="#39AFFD"
      :particleOpacity="0.7"
      :particlesNumber="100"
      shapeType="circle"
      :particleSize="4"
      linesColor="#8DD1FE"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      >
      </vue-particles>
    <div class="login-con">
     <Card icon="log-in" title="文修GPT" :bordered="false">
        <div class="form-con" v-if="pwdLogin">
          <login-form @on-success-valid="handleSubmit"></login-form>
        
            <div style="transform:translate(0,30px);display: inline-block;margin-left: 0px;">
                <span type="" @click="toRegister">没有账号？去注册</span>
            </div>
            <div style="transform:translate(0,30px);display: inline-block;margin-left: 80px;margin-bottom: 20px;">
                <span type="" @click="toDx">验证码登陆</span>
            </div>
        </div>

        <div class="form-con" v-if="dxLogin">
          <otp-form @on-success-valid2="handleSubmit2"></otp-form>
        
          <div style="transform:translate(0,30px);display: inline-block;margin-left: 0px;margin-bottom: 20px;">
              <span type="" @click="toLogin">密码登录</span>
            </div>
        </div>


        <div class="form-con" v-if="register">
          <register-form @on-success-valid3="handleSubmit3"></register-form>
        
          <div style="transform:translate(0,30px);display: inline-block;margin-left: 0px;margin-bottom: 20px;">
              <span type="" @click="toLogin">密码登录</span>
          </div>
        </div>
      </Card> 
    </div> 
  </div>

</template>

<script>
import LoginForm from '_c/login-form'
import OtpForm from '_c/otp-form'
import RegisterForm from '_c/register-form'

import {
  login,
  dxLogin,
  register
} from '@/api/user'

import { mapActions } from 'vuex'
import { setToken, getToken } from '@/libs/util'
export default {
  components: {
    LoginForm,
    OtpForm,
    RegisterForm
  },
  data() {
      return {
          // imgSrc: require('@/assets/logo.png'),
          imSrc:"",
          // loginForm: {
          //     username: '',
          //     password: '',
          //     code: ''
          // },
          checked: true,
          // rules: {
          //     username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
          //     password: [{required: true, message: '请输入密码', trigger: 'blur'}],
          //     code: [{required: true, message: '请输入验证码', trigger: 'blur'}]
          // },
          pwdLogin:true,
          dxLogin:false,
          register:false,
          time: 60, // 发送验证码倒计时
          sendMsgDisabled: false

      }
        },
  methods: {
    ...mapActions([
      'handleLogin',
      'getUserInfo'
    ]),
    // handleSubmit ({ userName, password }) {
    //   this.handleLogin({ userName, password }).then(res => {
    //     this.getUserInfo().then(res => {
    //       this.$router.push({
    //         name: this.$config.homeName
    //       })
    //     })
    //   })
    // }

    // 1.密码登录
    handleSubmit ({ userName, password }) {
      login({userName, password}).then(res=>{
        if(res.data.token){
          setToken(res.data.access_token)
          this.$router.push({name:"home"})
        }
      })

    },
    // 2.短信登录
    handleSubmit2({ phone_number, otp }){
      dxLogin({phone_number, otp}).then(res=>{
        if(res.data.access_token){
          setToken(res.data.access_token)
          this.$router.push({name:"home"})
        }
      })
    },
    handleSubmit3({ userName, phoneNumber,password,otp }){
      register({userName, phoneNumber,password,otp}).then(res=>{
        // if(res.data.token){
          // setToken(res.data.access_token)
          // this.$router.push({name:"home"})
        // }
        if(res.data.status == "success"){
          this.$Message.success("注册成功！")
          this.toLogin()
        }else{
          this.$Message.error("注册失败！")
        }
      })
    },


    toRegister(){
        this.pwdLogin = false
        this.dxLogin = false
        this.register = true
    },
    toDx(){
        this.pwdLogin = false
        this.register = false
        this.dxLogin = true
        
    },
    toLogin(){
        this.register = false
        this.dxLogin = false
        this.pwdLogin = true
    },
    count(){
      const that = this
      that.sendMsgDisabled = true
      const interval = window.setInterval(function() {
        if ((that.time--) <= 0) {
          that.time = 60
          that.sendMsgDisabled = false
          window.clearInterval(interval)
        }
      }, 1000)
    }
  }
}
</script>

<style>
</style>
